<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="/lib/echarts.min.js"></script>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        $.ajax({
            "url":"http://localhost:8080/library/seat/gradePie",
            "data":{},
            "success":function (result){
                option = {
                    title: {
                        text: '学生年纪分布',
                       // subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                         left: 'center'
                    },
                    series: [
                        {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: result.data.list,
                        }
                    ]
                };
                myChart.setOption(option);
            },
            "dataType":"json"
        });



    </script>
</body>

</html>